<template>
    <PageWrapper dense contentFullHeight contentClass="flex">
        <BasicTable @register="registerTable" :searchInfo="searchInfo">
            <template #toolbar>
                <a-button type="primary" @click="handleCreate">新增账号</a-button>
            </template>
            <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'roles'">
                    <li v-for="(item, index) in record.roles" :key="index">
                        <a-button :type="roleType(item.roleValue)">{{ item.roleValue }}</a-button>
                    </li>
                </template>

                <template v-if="column.key === 'action'">
                    <TableAction
                            :actions="[
              {
                icon: 'clarity:note-edit-line',
                tooltip: '编辑用户资料',
                onClick: handleEdit.bind(null, record),
              },
              {
                icon: 'ant-design:delete-outlined',
                color: 'error',
                tooltip: '删除此账号',
                popConfirm: {
                  title: '是否确认删除',
                  placement: 'left',
                  confirm: handleDelete.bind(null, record),
                },
              },
            ]"
                    />
                </template>
            </template>
        </BasicTable>
        <AccountModal @register="registerModal" @success="handleSuccess" />
    </PageWrapper>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { deleteAccount, getAccountList } from '/@/api/demo/system';
import { PageWrapper } from '/@/components/Page';
import DeptTree from './DeptTree.vue';

import { useModal } from '/@/components/Modal';
import AccountModal from './AccountModal.vue';

import { columns, searchFormSchema } from './account.data';
import { useGo } from '/@/hooks/web/usePage';
import { useMessage } from '@/hooks/web/useMessage';
import { FormSchema } from '@/components/Form/src/types/form';

export default defineComponent({
    name: 'AccountManagement',
    components: {
        BasicTable, PageWrapper, DeptTree, AccountModal, TableAction,
    },
    setup() {
        const roleClassMap = {
            "super": "danger",
            "test1": "success",
        };

        const roleType = function(role) {
            return roleClassMap[role] || "primary";
        };

        const go = useGo();
        const [registerModal, { openModal }] = useModal();
        const searchInfo = reactive<Recordable>({});
        const [registerTable, { reload, updateTableDataRecord }] = useTable({
            title: '账号列表',
            api: getAccountList,
            rowKey: 'id',
            columns,
            formConfig: {
                labelWidth: 120,
                schemas: searchFormSchema as FormSchema[], // 确保类型正确
                autoSubmitOnEnter: true,
            },
            useSearchForm: true,
            showTableSetting: true,
            bordered: true,
            handleSearchInfoFn(info) {
                return info;
            },
            actionColumn: {
                width: 120,
                title: '操作',
                dataIndex: 'action',
            },
        });

        function handleCreate() {
            openModal(true, { isUpdate: false });
        }

        function handleEdit(record: Recordable) {
            openModal(true, { record, isUpdate: true });
        }

        async function handleDelete(record: Recordable) {
            const { createMessage } = useMessage();
            try {
                await deleteAccount(record.id);
                createMessage.success('已成功删除用户');
                reload(); // 删除后刷新表格
            } catch (error) {
                createMessage.error('删除用户失败');
            }
        }

        function handleSuccess({ isUpdate, values }) {
            if (isUpdate) {
                updateTableDataRecord(values.id, values);
            } else {
                reload();
            }
        }

        function handleSelect(deptId = '') {
            searchInfo.deptId = deptId;
            reload();
        }

        function handleView(record: Recordable) {
            go('/system/account_detail/' + record.id);
        }

        return {
            registerTable,
            registerModal,
            handleCreate,
            handleEdit,
            handleDelete,
            handleSuccess,
            handleSelect,
            handleView,
            searchInfo,
            roleType,
        };
    },
});
</script>
